<template>
  <div>
    <div class="nav-container">
      <div class="nav-item" @click="navigateTo('/user/profile')">
        <el-icon size="22"><User /></el-icon>
        <span>个人中心</span>
      </div>
      <div class="nav-item" @click="navigateTo('/ai/agi-rainbow')">
        <el-icon size="22"><Star /></el-icon>
        <span>AGI成长rainbow</span>
      </div>
    </div>

    <div class="dashboard">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in cards" :key="index">
          <el-card shadow="hover">
            <div class="card-content">
              <div class="card-icon" :style="{background: item.color}">
                <el-icon :size="24"><component :is="item.icon" /></el-icon>
              </div>
              <div class="card-text">
                <div class="card-title">{{ item.title }}</div>
                <div class="card-value">{{ item.value }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { User, ShoppingCart, Money, List, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const navigateTo = path => router.push(path)


</script>

<style scoped>
.nav-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0;
  padding: 0 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 24px;
  border-radius: 12px;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 12px rgba(102, 126, 234, .35);
  transition: all .3s ease;
}

.nav-item:last-child {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  box-shadow: 0 4px 12px rgba(240, 147, 251, .35);
}

.nav-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(102, 126, 234, .55);
}
.nav-item:last-child:hover {
  box-shadow: 0 8px 24px rgba(240, 147, 251, .55);
}

/* ===== 仪表盘卡片（未改动） ===== */
.dashboard {
  margin-top: 20px;
}
.card-content {
  display: flex;
  align-items: center;
}
.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
}
.card-text {
  flex: 1;
}
.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}
.card-value {
  font-size: 22px;
  font-weight: bold;
}
</style>